<template>

	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<!-- <u-skeleton :loading="loading" avatar :title="false"> -->
		<view class="topQ" v-if="myList">

			<view class="hander-hander">
				<swiper class="swiper" :circular="true" :autoplay="false" :interval="3000" :duration="1000"
					style="height: 612rpx" v-if="swiperShow == 8 && VideoList.length != 0">
					<swiper-item class=" swiper-items" v-for="(item, index) in VideoList" :key="index">
						<video style="width: 100% !important; height: 612rpx" v-if="item.type == 8" id="myVideo"
							ref="myVideoRef" :src="item.pic" :show-center-play-btn="true" :controls="true"
							object-fit="cover" :show-play-btn="false" :enable-play-gesture="true"
							:auto-pause-if-open-native="true"></video>
					</swiper-item>
				</swiper>
				<view class="swiper_img" v-else>
					<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
						style="height: 612rpx" @change="PicImg" :current="PicImgIndex">
						<swiper-item class="swiper-items" v-for="(item, index) in photoAlbumList" :key="index">
							<image class="image" v-if="item.type == 3" style="width: 100%; height: 100%" :src="item.pic"
								mode="aspectFill">
							</image>
						</swiper-item>
					</swiper>
					<view class="numPic">
						<view class="">
							{{currentNumList}}/{{photoAlbumList.length}}
						</view>
					</view>
				</view>
				<view class="swiper-image" v-if="VideoList.length != 0">
					<view class="swiper-image-left " @click="swiperVideo(8)"
						:class="swiperShow == 8 ? 'swiper-active' : ''">
						视频
					</view>
					<view class="swiper-image-left1">
					</view>
					<view class="swiper-image-right" @click="swiperVideo(3)"
						:class="swiperShow == 3 ? 'swiper-active' : ''">
						相册
					</view>
					<view class="swiper-image-right1">
						<image src="https://i.ringzle.com/file/20240515/82c130aef5eb487fbe0886010c0dc536.png" mode="">
						</image>
					</view>
				</view>
				<view class="ones" v-if="myList">
					<view class="one-title">
						{{ myList.name }}
					</view>
					<view class="one-text">
						<view class="left">
							{{ categorytext }}
							<view></view> {{ myList.openingDate }}开业
						</view>
						<view class="right" @click="detailed(myList.id)">
							<view class="image-one"> 详情/设施 </view>
							<view class="image">
								<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
					<view class="card-text1">
						<text v-for="(ite, ids) in myList.featureLabelList" :key="ids">{{ ite }}</text>
					</view>
					<view class="one-input">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="8">
								<view class="demo-layout bg-purple-light">
									<view class="one2">
										{{ myList.islandName }}
									</view>
									<view class="two2">
										{{ myList.areaDetail }}
									</view>
								</view>
							</u-col>
							<u-col span="4" @click="navigation">
								<view class="demo-layout bg-purple">
									<view class="one1">
										<image
											src="https://i.ringzle.com/file/20240129/4496f5e1754649ed8a78a2ca9de26e4c.png"
											mode="aspectFit"></image>
									</view>
									<view class="two1">
										<text> 地图/周边 ></text>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="ones-ones"> </view>
				<view class="two"> </view>


			</view>

			<view class="two-center-two" @tap="timeShow = true">
				<view class="lfet">
					<view class="lfet-one"> 入住日期 </view>
					<view class="lfet-two">
						<text class="lfet-two-one">{{ arriveTime }}月{{ arriveTimes }}日</text>
						<text class="lfet-two-two">{{ departWeek }}</text>
					</view>
				</view>
				<view class="content">
					<view class="content-one"> </view>
					<view class="content-two"> 共{{ count }}晚 </view>
				</view>
				<view class="right">
					<view class="right-one"> 离店日期 </view>
					<view class="right-two">
						<text class="right-two-one">{{ leaveTime }}月{{ leaveTimes }}日</text>
						<text class="right-two-two">{{ departWeeks }}</text>
					</view>
				</view>
			</view>
			<view class="three">
				<view class="card">
					<template v-if="cardList.length > 0">
						<view v-for="(item, index) in cardList" :key="index">
							<view class="card-store">
								<view class="card-left" @tap.stop="cardShow(item)">
									<image :src="item.cover" mode="aspectFill"></image>
								</view>
								<view class="card-right" @tap.stop="cardShow(item)"
									:class="item.roomState == 1 ? '' : 'gray'">
									<view class="left-title" :class="item.roomState == 1 ? '' : 'gray'">
										<view class="lt_name">{{ item.name }}</view>
										<view class="image">
											<image
												src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
												mode="aspectFill">
											</image>
										</view>
									</view>
									<view class=""> </view>
									<view class="left-text" :class="item.roomState == 1 ? '' : 'gray'"
										v-if="item.bedData.length > 1">
										<view>
											{{ item.area }}m²
											·{{ item.bedData[0].num }}张{{ item.bedData[0].category }}
											·{{ item.bedData[1].num }}张{{ item.bedData[1].category }}
											·可住{{ item.checkinGuests }}成人
											<text v-if="item.childCheckinNums != 0">{{ item.childCheckinNums }}儿童
											</text>
										</view>

									</view>

									<view class="left-text" :class="item.roomState == 1 ? '' : 'gray'"
										v-else-if="item.bedData.length == 1">
										<view>
											{{ item.area }}m²
											·{{ item.bedData[0].num }}张{{ item.bedData[0].category }}
											·可住{{ item.checkinGuests }}成人
											<text v-if="item.childCheckinNums != 0">{{ item.childCheckinNums }}儿童
											</text>
										</view>
									</view>
									<view class="left-text" :class="item.roomState == 1 ? '' : 'gray'"
										v-else-if="item.bedData.length == 0">
									</view>

									<view class="left-brekker" :class="item.roomState == 1 ? '' : 'gray'">
										<text>{{ item.refundRule == 1 ? "不可取消" : item.refundRule == 2 ? "免费取消" : "限时取消" }}</text>
									</view>
									<view class="left-price" :class="item.roomState == 1 ? '' : 'gray'">
										<view class="one"> </view>
										<view class="left-one">
											<view class="left-price-one" v-if="item.roomState == 1">
												<!-- 	<view class="left-price-one-hander">
													<view class="left-price-one-left">
													</view>
													<view class="left-price-one-right">
														<text style="font-size: 20rpx; font-weight: Regular">￥</text>
														{{ item.bottomPrice }}
													</view>
												</view> -->
												<text style="font-size: 20rpx; font-weight: Regular">￥</text>
												{{ item.bottomPrice }}
												<!-- <view class="left-price-one-bottom"> 优惠已减￥60 </view> -->
											</view>
											<view class="left-price-one" v-else> </view>
										</view>
										<view class="right" @click.stop="reserve(item)" v-if="item.roomState == 1">
											订
										</view>
										<view class="right gray1" @click.stop="grayRight" v-else>
											满房
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<view class="two-list" v-if="copyList.length > 4" @click="showMore()">
						<view>{{ !expand ? "展开查看全部房型" : "收起查看部分房型" }}
							<image :class="expand?'shouqi':''" src="https://i.ringzle.com/file/20240129/8685b58bb76a48cdbf3aa53f0fc60fd9.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #f5f8fa; width: 100%; height: 20rpx"></view>
		</view>

		<!-- 底部切换 -->
		<view class="around" v-if="myList">
			<!-- <u-sticky :offset-top="mt + 66"> -->
			<u-sticky :offset-top="topheight">
				<view class="tabs">
					<view v-for="(item, index) in tabList" :key="index" @tap="changeScrollTop(item, index)">
						<text :class="index == current ? 'active' : ''">{{ item.name }}</text>
					</view>
				</view>
			</u-sticky>
			<view class="bottomContent">
				<view v-for="(item2, index2) in tabList" :key="index2" :class="'ait' + index2">
					<view class="ai0" v-if="index2 == 0">
						<view class="aroundList-two">
							<view class="title">
								<view class="title-left"> 预订须知 </view>
							</view>
							<view class="content-text-one">
								<view class="left-text-one"> 入离时间 </view>
								<view class="right-text-one">
									入住时间: {{ checkinTime }}以后 离店时间:
									{{ checkoutTime }}前退房
								</view>
							</view>
							<view class="content-text-one">
								<view class="left-text-one"> 押金说明 </view>
								<view class="right-text-one">
									<!-- 线下确认金额 -->
									{{ myList.isDeposit == 0 ? "无押金" : "收取押金" }}
								</view>
							</view>
						</view>
					</view>
					<view class="aroundList1 ai1" :id="'the-' + index2" v-if="index2 == 1">
						<view class="title"> 详情介绍 </view>
						<view class="aroundList1-one" :style="{ height: h1 }">
							<view v-for="(item, index) in substrings" :key="index">
								<u-parse class="text-two" :content="item" :tagStyle="style"></u-parse>
							</view>
							<!-- 			<view v-for="(item, index) in myList.picList" :key="index">
								<image class="aroundList1-one-image" :src="item.pic" mode="" v-if="item.type == 3">
								</image>
								<video class="aroundList1-one-image" v-if="item.type == 8" id="myVideo2"
									ref="myVideoRef2" :src="item.pic" :show-center-play-btn="true" :controls="true"
									object-fit="cover"></video>
							</view> -->
							<text @click="zksq('auto')" v-if="h1 != 'auto'" class="zk">
								展开查看更多
							</text>
							<text @click="zksq('800rpx')" v-else class="zk"> 收起 </text>
						</view>
					</view>
					<view class="aroundList2 ai2" :id="'the-' + index2" v-if="index2 == 2">
						<view class="title">
							<view class="title-left"> 客房点评 </view>
							<view class="title-right" @click="navcomment">
								<view class="title-right-text"> 查看全部 </view>
								<view class="image">
									<image
										src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
						<view class="aroundList2-one" v-if="commentList.hotelCommentInfo != null">
							<view class="aroundList2-one-hander">
								<view class="a-o-h-left">
									<view class="a-o-h-1">
										{{ score }}
									</view>
									<view class="a-o-h-2">
										<view class="a-o-h-21"> 分 </view>
										<view class="a-o-h-22">
											{{ commentList.commentNums }}条
										</view>
									</view>
								</view>
								<view class="a-o-h-right">
									<view class="a-o-h-3">
										<view class="a-o-h-31">
											<text>描述</text> <text> {{ describeScore }}</text>
										</view>
										<view class="a-o-h-32">
											<text>服务</text> <text>{{ serviceScore }}</text>
										</view>
									</view>
									<view class="vertical"> </view>
									<view class="a-o-h-3">
										<view class="a-o-h-31">
											<text>位置</text> <text>{{ locationScore }}</text>
										</view>
										<view class="a-o-h-32">
											<text>卫生</text> <text>{{ hygieneScore }}</text>
										</view>
									</view>
									<view class="vertical"> </view>
									<view class="a-o-h-3">
										<view class="a-o-h-31">
											<text>便捷</text> <text>{{ convenienceScore }}</text>
										</view>
										<view class="a-o-h-32">
											<text>性价比</text> <text>{{ costScore }}</text>
										</view>
									</view>
								</view>
							</view>
							<!-- 		<view class="aroundList2-one-centent">
								<view class="a-o-c-1">
									环境好({{commentList.describeScore}})
								</view>
								<view class="a-o-c-2">
									干净卫生({{commentList.describeScore}})
								</view>
								<view class="a-o-c-3">
									服务热心({{commentList.describeScore}})
								</view>
							</view> -->
							<view class="aroundList2-one-bottom">
								<view class="a-o-b-one">
									<view class="a-o-b-1">
										<image :src="commentList.hotelCommentInfo.headUrl" mode="aspectFill">
										</image>
									</view>
									<view class="a-o-b-2">
										<view class="a-o-b-name">
											{{ commentList.hotelCommentInfo.creatorName }}
										</view>
										<view class="a-o-b-time">
											{{ commentList.hotelCommentInfo.createDate }}
										</view>
									</view>
								</view>
								<view class="a-o-b-two">
									<view class="a-o-b-title">
										{{ commentList.hotelCommentInfo.comment }}
									</view>
									<view class="a-o-b-pic" v-if="imgUrlList != ''">
										<view class="image" v-for="(item, index) in imgUrlList" :key="index">
											<image :src="item" mode="aspectFill"> </image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%; text-align: center" v-else>
							暂无点评
						</view>
					</view>
					<view class="aroundList3 ai3" :id="'the-' + index2" v-if="index2 == 3">
						<view class="title">
							<view class="title-left"> 服务设施 </view>
							<!-- 		<view class="title-right" @click="navfacility(myList.id)">
								<view class="title-right-text">
									全部设施
								</view>
								<view class="image">
									<image
										src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
										mode="aspectFill">
									</image>
								</view>
							</view> -->
						</view>

						<view class="title-one">
							<view class="title-one-image">
								<image src="https://i.ringzle.com/file/20240127/ba3a98d15d0a4cb78e499fce40742f51.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="title-one-title">
								本处为门店设施，具体房型设施请参照房型详情信息
							</view>
						</view>

						<view class="aroundList3-list">
							<view v-for="(item, index) in textList" :key="index" v-if="item.isShow">
								<view class="two-text">
									<view class="left-title">
										{{ item.title }}
									</view>
									<view class="right-list">
										<view class="item" v-for="(ite, i) in item.list" :key="i"
											v-if="ite.isCheck == 1">
											<view class="image">
												<image
													src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
													mode="aspectFill"></image>
											</view>
											<view class="text">
												{{ ite.facilityName }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-bottom" v-if="myList">
			<view class="b-b-left">
				<view class="one-left" @click="care()">
					<view class="image" v-if="careStatus == 0">
						<image src="https://i.ringzle.com/file/20240218/f74e32c0af5043138488dc944ec9837e.png"
							mode="aspectFill">
						</image>
					</view>

					<view class="image" v-else>
						<image src="https://i.ringzle.com/file/20240219/fa383fb553b1487596ef1a1ad5e6349d.png"
							mode="aspectFill">
						</image>
					</view>

					<view class="text"> 收藏 </view>
				</view>
				<view class="two-left">
					<view class="image">
						<image src="https://i.ringzle.com/file/20240218/204565d8997b4a10ac4419aab351dca0.png"
							mode="aspectFill">
						</image>
					</view>
					<view class="text"> 客服 </view>
					<button open-type="contact" bindcontact="handleContact"></button>
				</view>
				<view class="two-left" @click="Catering()">
					<!-- <view class="image">
						<image src="https://i.ringzle.com/file/20240218/204565d8997b4a10ac4419aab351dca0.png"
							mode="aspectFill"></image>
					</view>
					<view class="text">
						餐厅
					</view> -->
				</view>
			</view>
			<view class="b-b-right" v-if="myList.isWithRepast == 1 && cardLists.length!=0" @click="Catering()">
				民宿餐厅
			</view>
			<view class="b-b-right" @click="goTopHeight(scrollTopsHeight)"> 查看房型 </view>
		</view>
		<!-- </u-skeleton> -->
		<!-- 返回顶部 -->
		<!-- 选择入驻时间 -->
		<u-calendar class="u-time" startText="住店" endText="离店" confirmDisabledText="请选择离店日期" :show="timeShow"
			:mode="mode" @confirm="confirm" @close="closeDate" :closeOnClickOverlay="true" color="#007A69"></u-calendar>

		<u-popup :show="show" :round="10" closeIconPos="top-right" closeable mode="bottom" @close="close" @open="open">
			<view class="pop-pop">
				<view class="pop-img">
					<!-- <image :src="DetailsedList.picList" mode="aspectFill"></image> -->
					<u-swiper :list="imgList" @change="(e) => (currentNum = e.current)" :autoplay="false"
						indicatorStyle="right: 20px" height="480rpx">
						<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ picListlength }}</text>
						</view>
					</u-swiper>
				</view>

				<view class="pop-titles">
					{{ DetailsedList.name }}
				</view>

				<view class="pop-grid">
					<view class="grid" v-if="DetailsedList.area">
						<image src="https://i.ringzle.com/file/20240416/1bf5ea857dc745d3b50633a1a5b0443b.png" mode="">
						</image>
						<view class=""> 整套房屋{{ DetailsedList.area }}m² </view>
					</view>
					<view class="grid">
						<image src="https://i.ringzle.com/file/20240416/cb90edc6fa0f4fd8be5a1609b4c15a23.png" mode="">
						</image>
						<view class="">
							可住{{ DetailsedList.checkinGuests }}成人
							<text v-if="DetailsedList.childCheckinNums != 0">
								{{ DetailsedList.childCheckinNums }}儿童</text>
						</view>
					</view>
					<view class="grid" v-if="DetailsedList.bedData">
						<image v-if="DetailsedList.bedData.length != 0"
							src="https://i.ringzle.com/file/20240416/ffaa804b4b7d4b55aa3cf489b76521cf.png" mode="">
						</image>
						<view v-if="DetailsedList.bedData.length == 1">
							{{ DetailsedList.bedData[0].num }}张
							{{ DetailsedList.bedData[0].category }}
							<text v-if="DetailsedList.bedData[0].size != ''">{{ DetailsedList.bedData[0].size }}</text>
						</view>
						<view v-else-if="DetailsedList.bedData.length > 1">
							{{ DetailsedList.bedData[0].num }}张{{ DetailsedList.bedData[0].category }},{{ DetailsedList.bedData[1].num
							}}张{{ DetailsedList.bedData[1].category }}
						</view>
						<view v-else-if="DetailsedList.bedData.length == 0"></view>
					</view>
					<view class="yuefen" v-for="(item, index) in DetailsedList.bedData" :key="index">
						<view class="yunying11">
							{{ item.category }}
						</view>
						<view class="yunying11">
							{{ item.size }}
						</view>
						<view class="yunying11"> {{ item.num }}张 </view>
					</view>
				</view>

				<view style="background-color: #f5f8fa; width: 100%; height: 20rpx"></view>

				<view class="pop-text">
					<view class="pop-titled" v-if="DetailsedList.bathroomWith != ''">
						<view class="pop-title-one"> 房间设施 </view>
					</view>
					<view class="pop-list" v-if="DetailsedList.bathroomWith != ''">
						<view class="left"> 卫浴 </view>
						<view class="right">
							<view class="item" v-for="(item, index) in DetailsedList.bathroomWith" :key="index">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.homeWith != ''">
						<view class="left"> 居家 </view>
						<view class="right">
							<view class="item" v-for="(item, index) in DetailsedList.homeWith" :key="index">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelRecreation != ''">
						<view class="left"> 娱乐 </view>
						<view class="right">
							<view class="item" v-for="(item, index) in DetailsedList.hotelRecreation" :key="index">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelRoomService != ''">
						<view class="left"> 客房服务 </view>
						<view class="right">
							<view class="item" v-for="(item, index) in DetailsedList.hotelRoomService" :key="index">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelSecurity != ''">
						<view class="left"> 安全 </view>
						<view class="right">
							<view class="item" v-for="(item, index) in DetailsedList.hotelSecurity" :key="index">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="background-color: #f5f8fa; width: 100%; height: 20rpx"></view>
				<view class="pop-text">
					<view class="pop-titled">
						<view class="pop-title-one"> 房间取消规则 </view>
						<view class="c">
							<view class="li">{{DetailsedList.refundRule==1?'不可取消':DetailsedList.refundRule==2?'免费取消':'限时取消'}}</view>
							<template v-if="DetailsedList.refundRule==3">
								<view class="li">取消天数:{{DetailsedList.cancelDay===0?'入住当天':`入住前${DetailsedList.cancelDay}天 `}}</view>
								<view class="li">取消时间段:{{DetailsedList.cancelTime}}前</view>
								<view class="li">扣款类型:{{DetailsedList.deductType==1?'扣首晚房费':DetailsedList.deductType==2?'扣全额房费':'百分比扣除'}}</view>
								<view class="li" v-if="DetailsedList.deductType==3">扣除百分比:{{DetailsedList.deductRatio}}</view>
							</template>
						</view>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="btn-bottom">
					<view class="b-b-left">
						<view class="one-left" @click="care()">
							<view class="image" v-if="careStatus == 0">
								<image src="https://i.ringzle.com/file/20240218/f74e32c0af5043138488dc944ec9837e.png"
									mode="aspectFill">
								</image>
							</view>
				
							<view class="image" v-else>
								<image src="https://i.ringzle.com/file/20240219/fa383fb553b1487596ef1a1ad5e6349d.png"
									mode="aspectFill">
								</image>
							</view>
				
							<view class="text"> 收藏 </view>
						</view>
						<view class="two-left">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240218/204565d8997b4a10ac4419aab351dca0.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="text"> 客服 </view>
							<button open-type="contact" bindcontact="handleContact"></button>
						</view>
					</view>
					<view class="b-b-right" v-if="myList.isWithRepast == 1 && cardLists.length!=0" @click="Catering()">
						民宿餐饮
					</view>
					<view class="b-b-right" @click="goTopHeight(scrollTopsHeight)"> 查看房型 </view>
				</view>
				
			</view>
		</u-popup>
		<u-popup :show="showCatering" :round="10" closeIconPos="top-right" closeable mode="bottom" @close="close"
			@open="open">
			<view class="pop-pop-Catering">
				<view class="pop-pop-title"> 套餐预订 </view>
				<view class="pop-card">
					<view class="" v-for="(item, index) in cardLists" :key="index">
						<view class="pop-card-store">
							<view class="pop-card-left">
								<image :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="pop-card-right">
								<view class="pop-card-title">
									{{ item.comboName }}
								</view>
								<view class="pop-card-price">
									<view class="pop-card-price-left">
										<text style="font-size: 24rpx; font-weight: Regular">￥</text>
										<text style="font-weight: bold">{{ item.price }}</text>
										<text
											style="font-size: 24rpx; padding: 0 6rpx 0;font-weight: Regular; color: #777777;">
											/{{ item.comboType == 1 ? "每桌" : "每人" }}</text>
									</view>
									<view class="pop-card-price-right" @click="navDining(item)">
										订购
									</view>
								</view>
							</view>
						</view>
					</view>

					<nodata class="nodatadiv" v-if="cardLists.length === 0"></nodata>
				</view>
			</view>
		</u-popup>


		<u-popup :show="cpzxShow" @close="cpzxShow=false" mode="center">
			<view class="cpzx_box">
				<view class="cb_close">
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="cpzxShow=false"></image>
				</view>
				<view class="cb_code">
					<image :show-menu-by-longpress="true"
						src="https://i.ringzle.com/file/20240612/a87125e461324662b81f58be32ec3003.png"></image>
				</view>
				<view class="cb_texts">
					<view class="cbt_top">
						<view>长按图片<br>识别二维码</view>
						<view>添加客服<br>[游嵊泗]</view>
					</view>
					<view class="cbt_tip">
						关于旅行中的问题，可以向<br>
						我提问，与您一对一服务～
					</view>
				</view>
				<image class="cb_hi" src="https://i.ringzle.com/file/20240112/761cc0fbd5954ec594c113ccea1359b7.png">
				</image>
			</view>
		</u-popup>



		<GetPhoneNumber ref="phoneNumber"></GetPhoneNumber>
	</view>

</template>

<script>
	import nodata from "@/compoments/NoData/index1.vue";
	import GetPhoneNumber from "@/compoments/Getphonenumber/index.vue";
	export default {
		components: {
			GetPhoneNumber,
			nodata,
		},

		data() {
			return {

				title: "详情",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				currentNum: null,
				mode: "range",
				scrollTop: 0,
				modes: "circle",
				h1: "800rpx",
				iconStyle: {
					width: "124rpx",
					height: "124rpx",
				},
				showCatering: false,
				iconStyleTabs: {
					width: "750rpx",
					height: "124rpx",
				},
				style: {
					// 字符串的形式
					p: "padding-bottom:120rpx;color:#666;font-size:30rpx; line-height: 48rpx; font-weight: Regular; ",
					image: "width: 702rpx;",
					// span: 'font-size: 30rpx'
				},
				ticketSwiperList: [
					"https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png",
					"https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png",
					"https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png",
				],
				tabList: [{
						name: "预订须知",
						id: 0
					},
					{
						name: "详情介绍",
						id: 1
					},
					{
						name: "客房点评",
						id: 2
					},
					{
						name: "服务设施",
						id: 3
					}
				],
				copyList: [],
				cardList: [],
				expand: false, //是否展开,默认false
				show: false,
				popList: {},
				fromData: {
					arriveDate: "",
					homestayId: "",
					houseBaseId: "",
					leaveDate: "",
				},
				arriveTime: "",
				arriveTimes: "",
				leaveTime: "",
				leaveTimes: "",
				count: 1,
				myList: '',
				hotelName: "",
				showList: {},
				option1: "",
				value: "",
				picLength: 0,
				fyInd: 0,
				lists: [1, 2, 3, 4],
				dateArr: [],
				weeks: ["周日", "周一 ", "周二", "周三", "周四", "周五", "周六"],
				timeShow: false,
				currentDate: 0,
				boatIndex: 0,
				timeList: [],
				boatTime: "",
				DetailsedList: [],
				picListlength: null,
				departWeek: "",
				departWeeks: "",
				current: 0,
				categorytext: "",
				substrings: {},
				detailsList: {},
				textList: [],
				currentTab: 0,
				scrollTops: 0,
				preActive: 0,
				currentActive: 0,
				//   为了解决点击滑动的bug，点击的时候，滑动里面不处理任何逻辑
				isClick: false,
				careStatus: 0,
				sliderImageArr: [
					"2022-08-26/202208261008569281562985416978497537.mp4",
					"2.png",
				], //图片/视频路径我随便乱写的
				videoplayObj: {}, //video对象
				cardLists: [],
				RepastList: {
					homestayId: "",
					limit: 10,
					page: 1,
				},
				commentList: {},
				imgUrlList: [],
				score: 0,
				describeScore: 0,
				serviceScore: 0,
				locationScore: 0,
				hygieneScore: 0,
				convenienceScore: 0,
				costScore: 0,
				checkinTime: "",
				checkoutTime: "",
				swiperShow: 8,
				VideoList: [],
				photoAlbumList: [],
				topheight: 0, //吸顶高度

				dayTops: [],
				imgList: [],
				currentNumList: 1,
				scrollTopsHeight: 0,
				cpzxShow: false,
				loading: true


			};
		},

		onLoad(e) {
			//获取扫描二维码链接数据
			if (e.q) {

				let url = decodeURIComponent(e.q);
				let parmas = {};
				let _t1 = url.split("?");
				let _t2 = _t1[_t1.length - 1].split("&");
				_t2.forEach((t) => {
					let _t = t.split("=");
					parmas[_t[0]] = _t[1];
				});
				if (parmas.toString() != "{}") {
					parmas.name = "";
					parmas.arriveDate = new Date().Format("yyyy-MM-dd");
					parmas.leaveDate = new Date(
						new Date().setDate(new Date().getDate() + 1)
					).Format("yyyy-MM-dd");
					return this.dealData(parmas);
				}
				this.collection();
				this.getRepast();
				// this.getcomment();
			}

			if (e.jdname) {
				function getDateStr(AddDayCount) {
					var dd = new Date();
					dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
					var y = dd.getFullYear();
					var m = dd.getMonth() + 1; //获取当前月份的日期
					var d = dd.getDate();
					return y + "-" + (m < 10 ? "0" + m : m) + "-" + d;
				}
				this.arriveTime = getDateStr(0).slice(5, 7);
				this.arriveTimes = getDateStr(0).slice(8, 10);
				this.leaveTime = getDateStr(1).slice(5, 7);
				this.leaveTimes = getDateStr(1).slice(8, 10);

				this.fromData.arriveDate = getDateStr(0);
				this.fromData.leaveDate = getDateStr(1);
				this.fromData.homestayId = e.jdname

				this.$api
					.get(`/hotel/open/getHouseListByHomestay/${e.jdname}`)
					.then((res) => {
						this.copyList = res.data.data;
						this.dealList();
						this.getDetails(res.data.data[0].homestayId);

					});
				this.collection();
				this.getRepast();
				// this.getcomment();
			} else {
				this.dealData(JSON.parse(e.list)[0]);
				let params = JSON.parse(e.list)[0];
				this.departWeek = this.weeks[new Date(params.arriveDate).getDay()];
				this.departWeeks = this.weeks[new Date(params.leaveDate).getDay()];
				this.collection();
				this.getRepast();
				// this.getcomment();
			}



			let that = this;

			// }, 0);

		},


		onReady() {

		},


		// 获取实时高度
		onPageScroll(obj) {
			const {
				scrollTop
			} = obj;
			this.scrollTops = scrollTop;
			this.setIndex();
		},
		created() {
			this.getTopHeight();
		},
		mounted() {

		},
		options: {
			styleIsolation: "shared",
		},
		methods: {
			getHeight() {
				this.$nextTick(() => {
					setTimeout(() => {
						//获取元素节点的位置信息
						const query = uni.createSelectorQuery().in(this)
						//小程序BUG不加延时算出来的高度部分机型不准确，目前官方没有给更好的解决方案
						// setTimeout(() => {
						query.select('.hander-hander').boundingClientRect(res => {
							uni.setStorageSync("resresres", res);
							this.scrollTopsHeight = res.height
						}).exec();
					}, 1000)
				})
			},
			PicImg(e, i) {
				this.currentNumList = e.detail.current + 1
			},
			getDaysTop(callback) {
				const query = uni.createSelectorQuery().in(this);
				this.dayTops = [];
				this.$nextTick(() => {
					[1, 2, 3, 4].forEach((d, i) => {
						let qclass = ".ait" + i;
						query.select(qclass).boundingClientRect((data) => {
							if (data) {
								//80是tab高度，45是标题高度(加边距)
								let dtop = data.top + this.scrollTops - this.mt - 80 - 45;
								if (!this.dayTops.includes(dtop)) this.dayTops.push(dtop);
							}
						}).exec();
					});
					callback && callback()
				});
			},
			setIndex() {
				let tops = this.dayTops.map((d, i) => {
					let json = {
						idx: i,
					};
					if (i == 0) {
						if (this.dayTops.length == 1) json.rang = [0, 999999];
						else json.rang = [0, this.dayTops[1] - 10];
					} else if (i > 0 && i < this.dayTops.length - 1)
						json.rang = [this.dayTops[i] - 10, this.dayTops[i + 1] - 10];
					else json.rang = [this.dayTops[i] - 10, 999999];
					return json;
				});
				let _t = tops.find(
					(t) => this.scrollTops >= t.rang[0] && this.scrollTops < t.rang[1]
				);
				if (_t) this.current = _t.idx;
			},
			changeScrollTop(item, index) {
				this.current = index;
				this.scrollTops = this.dayTops[index];
				this.goTop(this.scrollTops);
			},
			zksq(val) {
				this.h1 = val;
				this.getDaysTop(() => {
					this.setIndex();
				})
			},
			// 展开收回
			showMore() {
				this.expand = !this.expand;
				this.dealList(() => {
					if(!this.expand) return this.goTop(620);
					this.getDaysTop(() => {
						this.setIndex();
					})
				});
			},

			getTopHeight() {
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						//48为自定义导航栏高度，一般为44
						let topPx = e.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
						that.topheight = topPx / (uni.upx2px(topPx) /
							topPx) // px转rpx，这里必须转化为rpx，不然适配失败
					},
				});
			},

			// 切换视频图片
			swiperVideo(e) {
				this.swiperShow = e
			},

			// 去客房点评
			navcomment() {

				uni.navigateTo({
					url: "/pagesTrip/hotel/details/comment?obj=" + this.RepastList.homestayId,
				});

			},

			// 获取客房点评信息
			async getcomment() {
				await this.$api.get(
						`/api/hotel/comment/getHotelCommentCount/${this.RepastList.homestayId}`
					)
					.then((res) => {
						this.commentList = res.data.data;
						if (res.data.data != 0) {

							var score = res.data.data.score.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (score.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = score.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								score = `${integerPart}.${decimalPart}`;
							} else {
								score += ".0";
							}
							this.score = score;

							var describeScore = res.data.data.describeScore
								.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (describeScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = describeScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								describeScore = `${integerPart}.${decimalPart}`;
							} else {
								describeScore += ".0";
							}
							this.describeScore = describeScore;

							var serviceScore = res.data.data.serviceScore
								.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (serviceScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = serviceScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								serviceScore = `${integerPart}.${decimalPart}`;
							} else {
								serviceScore += ".0";
							}
							this.serviceScore = serviceScore;

							var locationScore = res.data.data.locationScore
								.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (locationScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = locationScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								locationScore = `${integerPart}.${decimalPart}`;
							} else {
								locationScore += ".0";
							}
							this.locationScore = locationScore;

							var hygieneScore = res.data.data.hygieneScore
								.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (hygieneScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = hygieneScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								hygieneScore = `${integerPart}.${decimalPart}`;
							} else {
								hygieneScore += ".0";
							}
							this.hygieneScore = hygieneScore;

							var convenienceScore = res.data.data.convenienceScore
								.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (convenienceScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = convenienceScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								convenienceScore = `${integerPart}.${decimalPart}`;
							} else {
								convenienceScore += ".0";
							}
							this.convenienceScore = convenienceScore;

							var costScore = res.data.data.costScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
							if (costScore.indexOf(".") !== -1) {
								let [integerPart, decimalPart] = costScore.split(".");

								if (decimalPart.length > 2) {
									decimalPart = decimalPart.substring(0, 2);
								} else if (decimalPart.length === 1) {
									decimalPart += "0";
								}
								costScore = `${integerPart}.${decimalPart}`;
							} else {
								costScore += ".0";
							}
							this.costScore = costScore;
							if (this.commentList.hotelCommentInfo.imgUrl) {
								this.imgUrlList = this.commentList.hotelCommentInfo.imgUrl.split(",");
							}
						}
					});

			},

			async getRepast() {
				this.RepastList.homestayId = this.fromData.homestayId;
				await this.$api.get("/api/repast/page", this.RepastList).then((res) => {
					this.cardLists = res.data.data.list;
				});
			},

			// 预定餐厅时间
			navDining(item) {
				this.$login().then((res) => {
					if (res !== 0) {
						this.$refs["phoneNumber"].show = true;
					}
				});
				if (uni.getStorageSync("access_token")) {

					let obj = {
						...item,
						lastRepastDate: this.myList.lastRepastDate,
					};
					uni.navigateTo({
						url: "/pagesTrip/hotel/details/HotelDining?obj=" + JSON.stringify(obj),
					});
				}

			},

			// 查看餐饮美食
			Catering() {
				this.show=false;
				this.showCatering = true;
			},
			//图片预览
			lookImg(e) {
				let array = [];
				array.push(e);
				uni.previewImage({
					urls: array,
					current: array,
				});
			},
			// 查看是否收藏了
			async collection() {
				let userId = uni.getStorageSync("userInfo")?(JSON.parse(uni.getStorageSync("userInfo")).id || null):null
				let commId = this.fromData.homestayId;


				if (userId != null) {
					await this.$api
						.get(`/api/hotel/userWhetherCollect/${userId}/${commId}`)
						.then((res) => {
							this.careStatus = res.data.data;
						});
				}
			},
			// 收藏
			care() {
				let list = {
					id: this.fromData.homestayId,
					type: "10",
				};
				this.$api.get("/api/introdution/Care", list).then((res) => {
					this.$showToast(res.data.data);
					if (res.data.data == "收藏成功") {
						this.$showToast(res.data.data);
					} else if (res.data.data == "取消成功") {
						this.$showToast(res.data.data);
					}
					setTimeout(() => {
						this.getDetails(this.fromData.homestayId);
						this.collection();
					}, 1000);
				});
			},

			// 查看房源 返回顶部
			goTop(scrollTop) {
				uni.pageScrollTo({
					scrollTop,
					duration: 300,
				});
			},



			// 查看房源 返回顶部
			goTopHeight(scrollTop) {
				this.show=false;
				uni.pageScrollTo({
					scrollTop,
					duration: 300,
				});
			},

			// 打电话
			Customer() {
				uni.makePhoneCall({
					phoneNumber: "暂无客服电话", //仅为示例

				});
			},
			// 全部设施
			navfacility(id) {
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/detailed?id=" + id,
				});
			},
			// tab切换
			changeTab(item, index) {
				this.current = index;
				this.fyInd = index;
			},
			// 时间组件关闭
			closeDate() {
				this.timeShow = false;
			},
			// 满房
			grayRight() {
				this.$showToast("没有多余房间");
			},

			dealData(params) {
				this.fromData.arriveDate = params.arriveDate;
				this.fromData.leaveDate = params.leaveDate;
				this.fromData.homestayId = params.homestayId;
				this.hotelName = params.name;

				let start = new Date(this.fromData.arriveDate).getTime();
				let end = new Date(this.fromData.leaveDate).getTime();
				let time = end - start;

				let day = parseInt(time / (1000 * 60 * 60 * 24));
				this.arriveTime = params.arriveDate.slice(5, 7); // 截取第一个字符
				this.arriveTimes = params.arriveDate.slice(8, 10); // 截取第一个字符

				this.leaveTime = params.leaveDate.slice(5, 7); // 截取第一个字符
				this.leaveTimes = params.leaveDate.slice(8, 10); // 截取第一个字符
				this.count = day;

				this.getList();
				this.getDetails(this.fromData.homestayId);
				this.getTimeList();
			},
			// 去详情 设施
			detailed(id) {
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/detailed?id=" + id,
				});
			},
			// 导航
			navigation() {
				uni.openLocation({
					latitude: Number(this.myList.lat),
					longitude: Number(this.myList.lon),
					name: this.myList.name,
				});
			},
			confirm(e) {
				let start = new Date(e[0]).getTime();
				let end = new Date(e[e.length - 1]).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				let arriveDate = e[0]; // 截取第一个字符
				let leaveDate = e[e.length - 1]; // 截取最后一个字符
				this.fromData.arriveDate = arriveDate;
				this.fromData.leaveDate = leaveDate;

				this.arriveTime = arriveDate.slice(5, 7); // 截取第一个字符
				this.arriveTimes = arriveDate.slice(8, 10); // 截取第一个字符

				this.leaveTime = leaveDate.slice(5, 7); // 截取第一个字符
				this.leaveTimes = leaveDate.slice(8, 10); // 截取第一个字符

				this.departWeek = this.weeks[new Date(e[0]).getDay()];
				this.departWeeks = this.weeks[new Date(e[e.length - 1]).getDay()];
				// 存储数据
				uni.setStorageSync("week", {
					departWeek: this.departWeek,
					departWeeks: this.departWeeks,
				});

				this.count = day;
				this.timeShow = false;
				this.getList();
			},
			getTimeList() {
				let dateArr = [];
				for (let i = 0; i < 3; i++) {
					let date = this.getDay(i);
					dateArr.push(date);
				}
				this.dateArr = dateArr;
			},
			getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(targetday_milliseconds); //注意，这行是关键代码

				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					price: 0.01,
				};
				return json;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			// 房间详情
			cardShow(item) {
				this.show = true;
				this.showList = item;
				this.getDetailsed(item.id);
			},
			open() {
				this.currentNum = null
				this.imgList = []
			},
			close() {
				this.currentNum = null
				this.show = false;
				this.showCatering = false;
				this.imgList = []
			},
			// 预订
			reserve(item) {
				this.fromData.homestayId = item.homestayId;
				this.fromData.houseBaseId = item.id;

				let list = JSON.stringify({
					...this.fromData,
					...this.showList,
					...this.myList,
					item,
					count: this.count,
				});

				this.$login().then((res) => {
					if (res !== 0) {
						this.$refs["phoneNumber"].show = true;
					}
				});
				if (uni.getStorageSync("access_token")) {
					uni.navigateTo({
						url: "/pagesTrip/hotel/reserve/index?list=" + encodeURIComponent(list),
					});
				}
			},
			async getList(val) {
				await this.$api
					.get("/api/hotel/getHouseInfoList", this.fromData)
					.then((res) => {
						this.copyList = res.data.data;
						this.dealList();
						this.cardList.forEach((item, i) => {
							let copy = JSON.parse(JSON.stringify(this.cardList));

							this.$set(
								this.cardList[i],
								"canExpand",
								copy.length > 1 ? true : false
							);
							this.$set(
								this.cardList[i],
								"tempList",
								copy.length > 1 ? copy.splice(0, 1) : item.children
							);
						});
					});
			},
			dealList(callback) {
				let tempList = JSON.parse(JSON.stringify(this.copyList));
				if (tempList.length > 4 && !this.expand)
					this.cardList = tempList.splice(0, 4);
				else this.cardList = tempList;
				callback && callback()
			},
			getDetails(id) {
				this.$api.get(`/api/hotel/getHomestayInfo/${id}`).then((res) => {

					if (res.data.code == 0) {
						this.myList = res.data.data;
						this.checkinTime = res.data.data.checkinTime.slice(0, 5);
						this.checkoutTime = res.data.data.checkoutTime.slice(0, 5);
						this.picLength = this.myList.picList.length;

						this.myList.picList.forEach((item, index) => {
							if (item.type == 8) {
								this.VideoList.push(item)
							} else {
								this.photoAlbumList.push(item)
							}
						})
						this.searchList = res.data.data.list;
						// 重组数据结构
						let arrlist = Object.keys(res.data.data.facilityMap);
						arrlist.forEach((item, i) => {
							this.textList.push({
								title: item,
								list: res.data.data.facilityMap[item],
								isShow: res.data.data.facilityMap[item].filter((f) => f
										.isCheck == "1")
									.length > 0 ?
									true : false,
							});
						});
						
						this.myList.introduction = this.myList.introduction.replaceAll('<p><br></p>','<br>');
						this.myList.introduction = this.myList.introduction.replaceAll('<p><strong>  </strong></p>','<br>');
						this.substrings = this.myList.introduction.split("\n");
						// 延时2秒钟
						// uni.$u.sleep().then(() => {
						// 	this.loading = false
						// })
						this.getHotelCategory();
						this.getHeight()
						this.getDaysTop();
					}
				});
			},

			// 获取酒店等级
			getHotelCategory() {
				this.$api.get("/sys/dict/type/all").then((res) => {
					let dataList = res.data.data.find(
						(p) => p.dictType == "HotelCategory"
					).dataList;
					dataList.forEach((item) => {
						if (item.dictValue == this.myList.category) {
							this.categorytext = item.dictLabel;
						}
					});
				});
			},

			getDetailsed(id) {
				this.$api.get(`/api/hotel/getHouseDetail/${id}`).then((res) => {
					this.DetailsedList = res.data.data;
					this.imgList = res.data.data.picList
					this.picListlength = res.data.data.picList.length;

				});
			},
		},
	};
</script>
<style lang="less">
	::v-deep .wxParse{
		line-height: 42rpx !important;
	}
	::v-deep .wxParse .p{
		margin: 0 !important;
	}
	::v-deep .wxParse .strong{
		font-weight: bold;
	}
	
	/deep/.u-popup__content,
	.p_box {
		// border-radius: 32rpx 32rpx 0 0;
		border-radius: 32rpx;
	}

	// /deep/.u-popup__content {
	// 	width: calc(100% - 142rpx);
	// }

	/deep/.v-calendar {
		.u-popup__content {
			width: 100% !important;
		}

		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}

	/deep/.cpzx_box {
		width: 608rpx;

		padding: 36rpx 40rpx 64rpx 30rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		position: relative;

		.cb_close {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.cb_code {
			width: 100%;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 280rpx;
				height: 280rpx;
			}
		}

		.cb_texts {
			margin-top: 107rpx;

			.cbt_top {
				display: flex;
				align-items: center;

				&>view {
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #025EA7;
					line-height: 33rpx;
					position: relative;

					&:last-child {
						margin-left: 20rpx;
						padding-left: 20rpx;

						&::before {
							content: '';
							width: 1rpx;
							height: 52rpx;
							background: #025EA7;
							position: absolute;
							top: 50%;
							margin-top: -26rpx;
							left: 0;
						}
					}
				}
			}

			.cbt_tip {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 42rpx;
			}
		}

		.cb_hi {
			width: 269rpx;
			height: 304rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 0;
		}
	}

	.swiper_img {
		position: relative;
	}

	.numPic {
		position: absolute;
		bottom: 38rpx;
		right: 30rpx;
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		// @include flex;
		justify-content: center;
		color: #FFFFFF;
	}


	.zk {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		text-align: center;
		background-image: url("https://i.ringzle.com/file/20240417/2e6c5021cd2a401e847bb4528b2d07e4.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 180rpx;
		line-height: 250rpx;
		color: #007a69;
	}

	.u-fade-enter-active {
		z-index: 999 !important;
	}

	.tabs {
		background: #fff;
		padding: 26rpx 0;
		height: 96rpx;
		z-index: 999;
		display: flex;
		align-items: center;


		// position: sticky;
		// top: 0;
		// width: 100%;

		&>view {
			width: 25%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777777;
			line-height: 40rpx;
			position: relative;
			text-align: center;
		}
	}

	.active {
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #111111;
		line-height: 45rpx;
	}

	.active::after {
		position: absolute;
		content: "";
		width: 84rpx;
		height: 8rpx;
		background: #111111;
		bottom: -26rpx;
		left: 50%;
		margin-left: -42rpx;
		border-radius: 30rpx;
	}

	.u-tabs__wrapper__nav__line {
		left: 37rpx !important;
	}

	.indicator-num {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		// @include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.indicator-num__text {
		color: #ffffff;
	}

	.u-swiper-hander {
		position: relative;
	}

	.care {
		position: absolute;
		top: 40rpx;
		right: 50rpx;
		z-index: 9;
	}

	.u-time {
		height: 60vh !important;
	}

	.gray {
		filter: grayscale(100%);
		// filter: brightness(70%) !important;
		color: #aaaaaa !important;
	}

	.gray1 {
		// filter: brightness(70%) !important;
		color: #ffffff !important;
		background-color: #cccccc !important;
	}

	.left-text {
		display: flex;
		margin: 10rpx 0;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.left-brekker {
		display: flex;
	}

	.u-popup__content {
		border-radius: 32rpx 32rpx 0 0 !important;
	}

	.pop-pop-Catering {
		box-sizing: border-box;
		height: 60vh;
		// margin: 24rpx;
		overflow: auto;
		border-radius: 32rpx 32rpx 0 0;

		.pop-pop-title {
			position: fixed;
			background-color: #fff;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #111111;
			font-weight: bold;
			padding: 20rpx 0;
			height: 75rpx;
			line-height: 75rpx;
			border-radius: 32rpx 32rpx 0 0;
		}

		.pop-card {
			padding: 130rpx 24rpx 24rpx;

			.pop-card-store {
				// margin: 20rpx 0;
				display: flex;
				background-color: #fff;
				width: 702rpx;
				height: 208rpx;
				// border-radius: 10rpx;
				// border-bottom: 1rpx solid #cccccc;

				.pop-card-left {
					width: 224rpx;
					height: 168rpx;
					border-radius: 10rpx;

					image {
						border-radius: 10rpx;

						width: 100%;
						height: 100%;
					}
				}

				.pop-card-right {
					// margin-top: 20rpx;
					padding: 0 20rpx;
					width: 64%;

					// width: 350rpx;
					.pop-card-title {
						font-size: 32rpx;
						color: #111;
						font-weight: bold;
					}

					.pop-card-text {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #777;
						font-weight: Regular;
					}

					.pop-card-price {
						display: flex;
						justify-content: space-between;
						height: 81rpx;

						.pop-card-price-left {
							color: #ff3e3e;
							font-weight: bold;
							font-size: 40rpx;
							margin: 20rpx 0 30rpx;
						}

						.pop-card-price-right {
							margin-top: 20rpx;
							width: 120rpx;
							height: 60rpx;
							line-height: 60rpx;
							background-color: #007a69;
							color: #ffffff;
							font-weight: bold;
							font-size: 26rpx;
							border-radius: 50rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.pop-pop {
		box-sizing: border-box;
		height: 70vh;
		// margin: 24rpx;
		overflow: auto;
		border-radius: 32rpx 32rpx 0 0;
		padding-bottom: 130rpx;
		// padding: 30rpx;

		.pop-img {
			width: 100% !important;
			height: 480rpx !important;
			border-radius: 32rpx 32rpx 0 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-titles {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			margin: 36rpx 30rpx;
			font-size: 36rpx;
			color: #111111;
			font-weight: bold;
		}

		.pop-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 30rpx;

			.grid {
				width: 49%;
				height: 30rpx;
				display: flex;
				align-items: center;
				margin: 16rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				&>view {
					margin: 0 24rpx;
					font-size: 24rpx;
					color: #111111;
					font-weight: bold;
				}
			}

			.yuefen {
				margin-top: 36rpx;
				box-sizing: border-box;
				width: 100%;
				height: 80rpx;
				display: flex;
			}

			.yunying11 {
				box-sizing: border-box;
				width: 33.33%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border: 1px solid #e6e6e6;
			}
		}

		.pop-text {
			padding: 30rpx;
			.c{
				margin-top: 24rpx;
				.li{
					font-size: 28rpx;
					line-height: 42rpx;
					color: #192942;
					margin-bottom:24rpx ;
				}
			}
			.pop-titled {
				// text-align: center;
				// margin: 0 40rpx 20rpx;

				.pop-title-one {
					// margin: 40rpx 30rpx 12rpx;
					font-size: 36rpx;
					color: #111111;
					font-weight: bold;
				}

				.pop-title-two {
					// margin: 12rpx 0 15rpx;
					margin: 0 30rpx;
					display: flex;
					align-items: center;

					.title-one-image {
						width: 20rpx;
						height: 22rpx;
						margin: 0 6rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title-one-title {
						margin-top: 6rpx;
						font-size: 24rpx;
						font-weight: Regular;
						color: #aaaaaa;
					}
				}
			}

			.pop-list {
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #efefef;

				.left {
					font-size: 26rpx;
					color: #111111;
					font-weight: bold;
					width: 16%;
				}

				.right {
					width: 90%;
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					align-items: center;

					.item {
						display: flex;
						width: 33%;
						margin-bottom: 20rpx;
						align-items: center;

						.image {
							width: 28rpx;
							height: 28rpx;
							margin: 5rpx 10rpx 0;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							font-size: 24rpx;
							color: #333;
							font-weight: Regular;
							text-align: initial;
						}
					}
				}
			}
		}
	}

	.card {
		padding: 24rpx;

		.card-store {
			// margin: 20rpx 0;
			display: flex;
			background-color: #fff;
			width: 702rpx;
			height: 268rpx;
			// border-radius: 10rpx;
			// border-bottom: 1rpx solid #cccccc;

			.card-left {
				// margin-top: 20rpx;
				width: 180rpx;
				height: 220rpx;
				// border-radius: 10rpx 0 0 10rpx;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.card-right {
				width: 484rpx;
				// margin-top: 20rpx;
				padding: 0 20rpx;

				// width: 350rpx;
				.card-title {
					font-size: 32rpx;
					color: #111;
					font-weight: bold;
				}

				.left-title {
					display: flex;
					align-items: center;
					.lt_name{
						width: calc(100% - 44rpx);
						font-size: 30rpx;
						color: #111111;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.image {
						width: 24rpx;
						height: 24rpx;
						line-height: 30rpx;
						margin: 0 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.left-text {
					color: #777777;
					font-size: 24rpx;
					font-weight: Regular;
					// white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;

					// margin: 20rpx 0;
				}

				.left-brekker {
					color: #007a69;
					font-size: 24rpx;
				}

				.left-price {
					display: flex;
					height: 81rpx;

					.one {
						width: 220rpx;
					}

					.left-one {
						width: 161rpx;
						height: 81rpx;
						line-height: 81rpx;
						margin-right: 20rpx;

						.left-price-one {
							text-align: -webkit-right;
							text-align: right;
							font-size: 38rpx;
							color: #ff4141;
							font-weight: bold;

							.left-price-one-hander {
								display: flex;
								justify-content: flex-end;

								.left-price-one-left {
									text-align: -webkit-right;
									margin-top: 20rpx;
									font-size: 20rpx;
									color: #999990;
									font-weight: Regular;
									text-decoration: line-through;
								}

								.left-price-one-right {
									text-align: right;
									font-size: 38rpx;
									color: #ff4141;
									font-weight: bold;
								}
							}

							.left-price-one-bottom {
								width: 134rpx;
								text-align: center;
								border-radius: 6rpx;
								font-size: 20rpx;
								color: #b77231;
								font-weight: Regular;
								background-color: #faf6ee;
							}
						}
					}

					.right {
						width: 88rpx;
						height: 88rpx;
						line-height: 88rpx;
						background-color: #007a69;
						color: #ffffff;
						font-weight: Medium;
						font-size: 36rpx;
						border-radius: 16rpx;
						text-align: center;
					}
				}
			}
		}
	}

	/* 修改选中时的背景颜色 */
	radio:checked {
		background-color: #007a69;
		/* 自定义颜色 */
		color: #fff;
		/* 文本颜色 */
	}

	/* 修改选中时的图标颜色 */
	radio:checked::before {
		border-color: #007a69;
		/* 自定义颜色 */
	}

	.date {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: auto auto auto auto;
		gap: 20rpx;
		margin-bottom: 60rpx;
		padding: 0 24rpx;

		.item {
			padding: 20rpx 0;
			border: 1rpx solid #007a69;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;

			text {
				display: block;
				color: #333;

				&:nth-child(2) {
					margin: 8rpx 0;
				}

				// &:nth-child(3) {
				// 	color: #007A69;
				// }
			}

			// &:last-child {
			// 	padding-top: 40rpx;

			// 	text {
			// 		color: #007A69;
			// 	}

			// }
		}

		.itemSelected {
			background: linear-gradient(90deg, #0ebffe 0%, #00d3e8 100%);
			border: 1rpx solid #007a69;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;

			text {
				display: block;
				color: #ffffff;

				&:nth-child(2) {
					margin: 8rpx 0;
					color: #ffffff;
				}

				&:nth-child(3) {
					color: #ffffff;
					// color: #111111;
				}
			}

			&:last-child {
				// padding-top: 40rpx;
				color: #ffffff;
			}
		}

		.boat {
			background-color: #007a69 !important;
		}
	}

	.flight {
		box-sizing: border-box;
		// display: grid;
		// grid-template-columns: auto auto auto auto;
		// gap: 20rpx;
		margin-bottom: 60rpx;
		padding: 0 24rpx;

		.bg-purple {
			font-size: 24rpx;
			color: #777777;
		}

		.bg-purple-dark {
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>


<style lang="less">
	.u-popup__content__close--top-right {
		width: 42rpx !important;
		height: 42rpx !important;
		border-radius: 50rpx !important;
		background-color: rgba(0, 0, 0, 0.2) !important;

		.uicon-close {
			margin-top: 13rpx !important;
			color: #fff !important;
			font-size: 30rpx !important;
			margin-left: 6rpx !important;
		}
	}

	// .u-icon__icon {
	// 	font-size: 40rpx !important;
	// }

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		// background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.u-tag__text--mini {
		line-height: 14rpx !important;
	}
</style>


<style lang="scss">
	.BackToTop {
		position: fixed;
		bottom: 60rpx;
		right: 60rpx;
		width: 124rpx;
		height: 124rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.page {
		box-sizing: border-box;
		padding-bottom: 100rpx;
		position: relative;
	}

	.btn-bottom {
		box-sizing: border-box;
		position: fixed;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		padding: 17rpx 30rpx 30rpx 30rpx;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
		z-index: 999;

		.b-b-left {
			display: flex;

			.one-left,
			.two-left {
				text-align: center;
				margin: 10rpx 20rpx;
				position: relative;

				.image {
					width: 40rpx;
					height: 40rpx;
					margin: 5rpx 7rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 24rpx;
					font-weight: Regular;
					color: #333;
				}

				button {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					background: transparent;
					z-index: 999;

					&::after {
						width: 0 !important;
						height: 0 !important;
					}
				}
			}
		}

		.b-b-right {
			width: 200rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #007a69;
			font-size: 30rpx;
			font-weight: Medium;
			color: #ffffff;
			text-align: center;
			border-radius: 16rpx;
		}
	}

	.swiper {
		position: relative;
	}

	.swiper-image {
		position: absolute;
		// bottom: 30rpx;
		left: 31rpx;
		top: 660rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		width: 206rpx;
		height: 48rpx;
		line-height: 48rpx;
		// background-color: ;
		background-color: rgba(0, 0, 0, 0.2) !important;
		border-radius: 24rpx;
		box-sizing: border-box;
		text-align: center;

		.swiper-image-left,
		.swiper-image-right {
			text-align: center;
			width: 72rpx;
			font-size: 22rpx;
			font-weight: Regular;
			color: #FFFFFF;
			margin: 0 6rpx;
		}

		// .swiper-image-left {
		// 	margin-left: 6rpx;
		// }

		.swiper-image-right1 {
			width: 24rpx;
			height: 24rpx;
			line-height: 30rpx;
			margin-right: 6rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-image-left1 {
			// font-size: 22rpx;
			// font-weight: Regular;
			width: 1rpx;
			height: 19rpx;
			background-color: #fff;
		}

		.swiper-active {
			box-sizing: border-box;
			color: #111111;
			background-color: #fff;
			// padding: 3rpx 14rpx;
			border-radius: 24rpx;
			height: 36rpx;
			width: 68rpx;
			text-align: center;
			line-height: 36rpx;
		}

	}

	.ones {
		background-color: #fff;
		position: absolute;
		box-sizing: border-box;
		padding: 48rpx 30rpx 30rpx;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: -24rpx;
		width: 100%;

		.one-title {
			font-size: 36rpx;
			color: #111111;
			font-weight: 600;
		}

		.one-text {
			margin: 15rpx 0;
			font-size: 24rpx;
			color: #808080;
			display: flex;
			justify-content: space-between;

			.left {
				// color: #666666;
				// font-size: 24rpx;
				// font-weight: Regular;
				display: flex;
				margin: 12rpx 0;
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;

				view {
					margin: 6rpx 10rpx 4rpx;
					width: 2rpx;
					height: 20rpx;
					background-color: #d9d9d9;
				}
			}

			.right {
				color: #111;
				font-size: 24rpx;
				font-weight: bold;
				display: flex;
				text-align: right;
				align-items: center;

				.image-one {}

				.image {
					margin: 0 8rpx;
					width: 24rpx;
					height: 24rpx;
					line-height: 35rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.card-text1 {
			margin: 20rpx 0 30rpx;

			display: flex;
			height: 36rpx;

			text {
				display: inline-block;
				padding: 0 8rpx;
				height: 36rpx;
				line-height: 36rpx;
				color: #c9a771;
				border: 1rpx solid #dcc7ab;
				border-radius: 4rpx;
				margin-right: 12rpx;
				font-size: 22rpx;
			}
		}

		.one-input {
			box-sizing: border-box;
			width: 100%;
			height: 128rpx;
			background: #f0f8f6;
			// line-height: 128rpx;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.bg-purple-light {

				// display: flex;
				.one2 {
					// height: 36rpx !important;
					font-size: 26rpx;
					color: #000000;
					margin: 12rpx 6rpx;
					font-weight: bold;
				}

				.two2 {
					font-size: 24rpx;
					color: #666666;
					// height: 36rpx !important;
					margin: 6rpx 6rpx;
					font-weight: Regular;
				}
			}

			.bg-purple {
				// align-items: center;
				// display: flex;
				text-align: center;
				// text-align: right;
				font-size: 24rpx;
				color: #808080;
				background-image: url("https://i.ringzle.com/file/20240129/dcf2338517e344c697ef7cd853ce2234.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 240rpx;
				height: 128rpx;

				.one1 {
					margin: auto 110rpx;
					padding-top: 30rpx;
					width: 46rpx;
					height: 46rpx;

					image {
						width: 100%;
						height: 100%;
						// width: 46rpx;
						// height: 46rpx;
					}
				}

				.two1 {
					margin: 4rpx 12rpx;
					font-size: 22rpx;
					color: #007a69;

					text {
						margin-left: 30rpx;
					}
				}
			}
		}
	}

	.ones-ones {
		width: 100%;
		height: 390rpx;
	}

	.two {
		box-sizing: border-box;
		width: 750rpx;
		height: 20rpx;
		background: #f5f8fa;
	}

	.two-center-two {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 34rpx;

		.lfet {
			background-image: url("https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 272rpx;
			height: 96rpx;

			.lfet-one {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				margin-left: 24rpx;
				margin-top: -12rpx;
			}

			.lfet-two {
				margin: 10rpx 20rpx 15rpx;

				.lfet-two-one {
					font-size: 36rpx;
					color: #111111;
					font-weight: Bold;
				}

				.lfet-two-two {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: Regular !important;
				}
			}
		}

		.content {
			.content-one {
				height: 20rpx;
			}

			.content-two {
				width: 98rpx;
				height: 48rpx;
				border-radius: 50rpx;
				border: 2rpx solid #efefef;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				color: #111111;
				font-weight: Regular;
			}
		}

		.right {
			background-image: url("https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 272rpx;
			height: 96rpx;

			.right-one {
				margin-left: 24rpx;
				margin-top: -13rpx;
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
			}

			.right-two {
				margin: 10rpx 20rpx 15rpx;

				.right-two-one {
					font-size: 36rpx;
					color: #111111;
					font-weight: Bold;
				}

				.right-two-two {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: Regular !important;
				}
			}
		}
	}

	.two-list {
		background-color: #f0f8f6;
		color: #007a69;
		font-size: 24rpx;
		font-weight: Regular;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		margin: auto;
		display: flex;
		align-items: center;

		view {
			// display: block;
			margin: auto;
			display: flex;
			align-items: center;
		}

		image {
			margin: 0 12rpx;
			width: 24rpx;
			height: 24rpx;
			&.shouqi{
				transform: rotate(180deg);
			}
		}
	}

	.around {
		// padding-bottom: 90rpx;

		.aroundList-one {
			padding: 40rpx 30rpx 23rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #111111;
			}

			.landlord {
				display: flex;
				margin: 48rpx 0 0;
				width: 100%;
				box-sizing: border-box;

				.landlord-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					border-radius: 50rpx;

					image {
						border-radius: 50rpx;
						width: 100%;
						height: 100%;
					}
				}

				.landlord-left {
					width: 350rpx;

					.landlord-left-one {
						display: flex;
						align-items: center;

						.left-one-name {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
							margin: 15rpx 0;
						}

						.left-one-img {
							margin: 0 12rpx;
							width: 36rpx;
							height: 28rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.landlord-left-two {
						margin: 15rpx 0;
						font-size: 24rpx;
						font-weight: Regular;
						color: #333333;
					}
				}

				.landlord-right {
					margin-top: 15rpx;

					text {
						border-radius: 16rpx;
						display: block;
						width: 200rpx;
						height: 88rpx;
						background-color: #007a69;
						color: #ffffff;
						font-size: 30rpx;
						font-weight: Medium;
						text-align: center;
						line-height: 88rpx;
					}
				}
			}
		}

		.aroundList-two {
			padding: 40rpx 30rpx 23rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.title-left {
					font-size: 36rpx;
					font-weight: bold;
					color: #111111;
				}

				.title-right {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title-right-text {
						font-size: 26rpx;
						font-weight: Regular;
						color: #007a69;
					}

					.image {
						width: 28rpx;
						height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.content-text-one {
				display: flex;
				margin: 20rpx 0;

				.left-text-one {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 30rpx;
					width: 104rpx;
				}

				.right-text-one {
					width: 520rpx;
					font-size: 26rpx;
					font-weight: Regular;
					color: #333333;
				}
			}
		}

		.aroundList1 {
			padding: 40rpx 35rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #111111;
			}

			.aroundList1-one {
				margin-top: 24rpx;
				box-sizing: border-box;
				// padding: 88rpx 30rpx;
				padding: 0 0 120rpx;
				// margin: -20rpx 20rpx;
				// border-radius: 20rpx;
				// width: 710rpx;
				height: 1000rpx;
				// background-color: #FFFFFF;
				position: relative;
				overflow: hidden;

				.aroundList1-one-image {
					border-radius: 16rpx;
					width: 100%;
					// height: 368rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.aroundList2 {
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				justify-content: space-between;

				.title-left {
					font-size: 36rpx;
					font-weight: bold;
					color: #111111;
				}

				.title-right {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title-right-text {
						font-size: 26rpx;
						font-weight: Regular;
						color: #007a69;
					}

					.image {
						width: 28rpx;
						height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.aroundList2-one {
				.aroundList2-one-hander {
					margin: 40rpx 0 20rpx;
					width: 100%;
					height: 156rpx;
					background-color: #f7f8fb;
					border-radius: 16rpx;
					display: flex;
					// margin: auto 26rpx;

					.a-o-h-left {
						display: flex;
						margin: auto 26rpx;

						.a-o-h-1 {
							font-size: 88rpx;
							color: #111111;
							font-weight: bold;
						}

						.a-o-h-2 {
							margin: auto 5rpx;

							.a-o-h-21 {
								font-size: 30rpx;
								color: #333;
								font-weight: Regular;
							}

							.a-o-h-22 {
								font-size: 30rpx;
								color: #333;
								font-weight: Regular;
							}
						}
					}

					.a-o-h-right {
						display: flex;
						margin: auto;

						.vertical {
							// margin: auto;
							width: 1rpx;
							height: 52rpx;
							background-color: #d6d8e1;
							margin: 8rpx 12rpx 0 8rpx;
						}

						.a-o-h-3 {
							margin: auto;

							.a-o-h-31 {
								text:nth-child(1) {
									font-size: 20rpx;
									color: #777777;
									font-weight: Regular;
								}

								text:nth-child(2) {
									font-size: 20rpx;
									color: #333;
									font-weight: bold;
									margin: 0 6rpx 0 12rpx;
								}
							}

							.a-o-h-32 {
								text:nth-child(1) {
									font-size: 20rpx;
									color: #777777;
									font-weight: Regular;
								}

								text:nth-child(2) {
									font-size: 20rpx;
									color: #333;
									font-weight: bold;
									margin: 0 6rpx 0 12rpx;
								}
							}
						}
					}
				}

				.aroundList2-one-centent {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0 30rpx;

					.a-o-c-1,
					.a-o-c-2,
					.a-o-c-3 {
						border-radius: 16rpx;
						width: 220rpx;
						height: 60rpx;
						background-color: #f4f5f7;
						text-align: center;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #333333;
						font-weight: Regular;
					}
				}

				.aroundList2-one-bottom {
					box-sizing: border-box;

					.a-o-b-one {
						// margin: 25rpx 0 10rpx;
						display: flex;
						align-items: center;

						.a-o-b-1 {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50rpx;
							margin: 0 9rpx;

							image {
								border-radius: 50rpx;
								width: 100%;
								height: 100%;
							}
						}

						.a-o-b-2 {
							.a-o-b-name {
								font-size: 26rpx;
								color: #2c2c2c;
								font-weight: bold;
								margin-bottom: 10rpx;
							}

							.a-o-b-time {
								font-size: 24rpx;
								color: #777777;
								font-weight: Regular;
							}
						}
					}

					.a-o-b-two {
						.a-o-b-title {
							margin: 25rpx 0 10rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight: Regular;
						}

						.a-o-b-pic {
							display: flex;
							// justify-content: space-between;

							.image {
								width: 212rpx;
								height: 212rpx;
								border-radius: 16rpx;
								margin-right: 20rpx;

								image {
									border-radius: 16rpx;
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}

		.aroundList3 {
			padding: 40rpx 30rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.title-left {
					font-size: 36rpx;
					font-weight: bold;
					color: #111111;
				}

				.title-right {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title-right-text {
						font-size: 26rpx;
						font-weight: Regular;
						color: #007a69;
					}

					.image {
						width: 28rpx;
						height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.title-one {
				margin: 12rpx 0 15rpx;
				display: flex;
				align-items: center;

				.title-one-image {
					width: 20rpx;
					height: 22rpx;
					margin: 0 6rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title-one-title {
					margin-top: 6rpx;
					font-size: 20rpx;
					font-weight: Regular;
					color: #aaaaaa;
				}
			}

			.aroundList3-list {
				border-top: 1rpx solid #efefef;
				// margin: auto 30rpx;
				padding: 30rpx 0;
				// display: flex;

				.two-text {
					display: flex;
					flex-wrap: wrap;
					text-align: center;

					.left-title {
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						margin: 0 0 20rpx;
					}

					.right-list {
						display: flex;
						flex-wrap: wrap;
						text-align: center;
						width: 100%;

						.item {
							display: flex;
							width: 33%;
							margin-bottom: 20rpx;
							align-items: center;

							.image {
								width: 28rpx;
								height: 28rpx;
								margin: 0 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								font-size: 24rpx;
								font-weight: Regular;
								color: #333;
							}
						}
					}
				}
			}
		}
	}

	.pop {
		box-sizing: border-box;
		height: 80vh;
		margin: 24rpx;
		overflow: auto;

		.u-icon__icon {
			font-size: 30rpx !important;
		}

		.pop-titles {
			text-align: center;
			margin: 0 40rpx 20rpx;
			font-size: 36rpx;
			color: #111111;
		}

		.pop-img {
			width: 100% !important;
			height: 380rpx !important;
			// border-radius: 15rpx;
		}

		.pop-title {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			margin: 6rpx 0;
			font-size: 24rpx;
			color: #111111;
		}

		.pop-title1 {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>